---
title: React Blockquote - Flowbite
description: The blockquote component can be used to quote text content from an external source that can be used for testimonials, reviews, and quotes inside an article
---

Get started with a collection of blockquote components when quoting external sources such as quotes inside an article, user reviews, and testimonials based on multiple examples of layouts, styles, and contexts.

The main `<Blockquote>` component can be used together with the `<cite>` tag or attribute to also mention the source of the quote content.

To start using the component make sure that you have imported it from Flowbite React:

```jsx
import { Blockquote } from "flowbite-react";
```

## Default blockquote

Use this example to quote an external source inside a `<Blockquote>` component.

<Example name="blockquote.root" />

## Solid background

This example can be used as an alternative style to the default one by applying a solid background color.

<Example name="blockquote.solidBackground" />

## Blockquote icon

Use this example to show an icon above the blockquote text content.

<Example name="blockquote.icon" />

## Paragraph context

Use this example to show a `<Blockquote>` component between multiple paragraph elements.

<Example name="blockquote.paragraphContext" />

## User testimonial

This example can be used for user testimonials by mentioning the author and occupation of the author.

<Example name="blockquote.userTestimonial" />

## User Review

Use this example to show a user review with rating stars and the name and occupation of the author.

<Example name="blockquote.userReview" />

## Alignment

Choose from the following examples the blockquote text alignment from starting from left, center to right based on the utility classes from Tailwind CSS.

### Left

The default alignment of the blockquote text content is the left side of the document.

<Example name="blockquote.left" />

### Center

Use the text-center class from Tailwind CSS to align the text content inside the blockquote to the center.

<Example name="blockquote.center" />

### Right

Use the text-right utility class from Tailwind CSS to align the blockquote text content to the right side of the page.

<Example name="blockquote.right" />

## Sizes

Choose from one of the multiple sizes for the default blockquote component based on the surrounding elements and sizes.

### Small

Use the text-lg font size class from Tailwind CSS to apply the small size for the blockquote component.

<Example name="blockquote.small" />

### Medium

Use the text-xl utility class to set the default size for the blockquote element.

<Example name="blockquote.medium" />

### Large

The text-2xl class can be used to set a large size for the blockquote component.

<Example name="blockquote.large" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="blockquote" />

## References

- [Flowbite Blockquote](https://flowbite.com/docs/typography/blockquote/)
